<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-10-24 08:44:46
 * @LastEditTime: 2023-10-27 17:39:08
-->
<template>
    <el-upload class="upload-demo" drag action="#" multiple :limit="10" :on-exceed="handleExceed" :on-change="handleChange"
        :auto-upload="false" :on-remove="onRemove">

        <el-icon class="el-icon--upload"><upload-filled /></el-icon>

        <div class="el-upload__text">
            {{ $t('text.PageData.l345') }}
        </div>

        <template #tip>
            <div class="el-upload__tip">
                {{ $t('text.PageData.l346') }}
            </div>
        </template>

    </el-upload>
</template>
  
<script>
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios';
let config = require('../../config.js')
export default {
    components: {
        UploadFilled
    },
    data() {
        return {
            annexList: [],
        }
    },
    methods: {
        handleExceed(files, fileList) {
            this.$message.warning(`Up to 10 files can be uploaded. ${files.length} files exceeded`);
            console.log(files, fileList)
        },
        handleChange(file) {
            // handle file changes
            const extension = file.name.split('.').pop().toLowerCase();
            const allowExtensions = ['jpg', 'svg', 'png', 'jpeg', 'bmp', 'webp', 'gif', 'mp4', 'm38u', 'mov', 'mpg', 'wmv', 'ogm', 'm4v', 'WebM', 'avi',
                'doc', 'docx', 'xls', 'xlsx', 'word', 'ppt', 'pptx', 'pdf', 'zip'];
            const sizeLimit = 100 * 1024 * 1024; // 100MB

            if (!allowExtensions.includes(extension)) {
                ElMessage.error({
                    showClose: true,
                    message: this.$t('text.Common.l69'),
                    type: 'error',
                })
                return false;
            }
            if (file.size > sizeLimit) {
                ElMessage.error({
                    showClose: true,
                    message: this.$t('text.Common.l70'),
                    type: 'error',
                })
                return false;
            }
            const params = new FormData();
            params.append("file", file.raw);
            axios({
                url: config.api[0].apiUrl + "/opsli-boot/api/v1/house/file/uploadannex",
                method: 'post',
                data: params,
                headers: { 'T-Authorization': localStorage.getItem('token'), 'Accept-Language': localStorage.getItem("language") == null ? 'zh-CN' : localStorage.getItem("language") == 'zh' ? 'zh-CN' : 'en-US' },
                processData: false,
                contentType: false,
            }).then((response) => {
                if (response.data.code === 0) {
                    this.annexList.push({ name: file.name, path: response.data.data.fileUrls[0], uid: file.uid })
                } else {
                    ElMessage.error({
                        showClose: true,
                        message: response.data.msg,
                        type: 'error',
                    })
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        onRemove(file) {
            this.annexList = this.annexList.filter(v => v.uid !== file.uid)
        }
    },
    watch: {
        annexList: {
            handler() {
                return this.$emit("returnData", {annexList:this.annexList});
            },
            deep: true
        }
    },
}
</script>
<style scoped>
.upload-demo {
    width: 160%;
    padding: 10px 0;
    margin-bottom: 50px;
}
</style>